<template>
  <div>
    <h1>Banner（横幅）</h1>
    <p>
      v-banner 组件被用来作为向用户发送1-2动作的中间断信息。 它有两个变量 单行
      and 多行 (默示)。 这些图标可以与您的消息和操作一起使用。
    </p>

    <br />
    <h2>属性</h2>

    <br />
    <h3>单行亮色主题</h3>
    <p>
      单行 VBanner 用于少量信息，推荐给 桌面 实现。 您可以选择启用 置顶
      prop以确保内容被固定到屏幕上 (注意：在 IE11中不工作。
      您可以在这里找到更多关于 置顶位置的信息 。
    </p>
    <v-card>
      <v-system-bar></v-system-bar>
      <v-toolbar flat class="light-blue accent-1">
        <v-toolbar-title>My Document</v-toolbar-title>
        <v-spacer></v-spacer>
        <div>
          <v-switch
            v-model="sticky"
            label="Sticky Banner"
            hide-details
          ></v-switch>
        </div>
      </v-toolbar>
      <v-banner single-line :sticky="sticky">
        We can't save your edits while you are in offline mode.

        <template v-slot:actions>
          <v-btn text color="deep-purple accent-4"> Get Online </v-btn>
        </template>
      </v-banner>
      <v-card-text class="grey lighten-4">
        <v-sheet max-width="800" height="300" class="mx-auto"></v-sheet>
      </v-card-text>
    </v-card>

    <br />
    <h2>事件</h2>

    <br />
    <h3>图标包</h3>
    <p>横幅上的图标在点击时发出 click:icon 事件，该事件带有自定义图标插槽。</p>
    <v-banner single-line @click:icon="alert">
      <v-icon slot="icon" color="warning" size="36">
        mdi-wifi-strength-alert-outline
      </v-icon>
      Unable to verify your Internet connection

      <template v-slot:actions>
        <v-btn color="primary" text> Connection Settings </v-btn>
      </template>
    </v-banner>

    <br />
    <h2>插槽</h2>
    <br />
    <h3>行为</h3>
    <p>
      Actions 插槽在其范围内具有 dismiss 功能，你可以使用它来轻松地隐藏横幅。
    </p>
    <div>
      <v-checkbox v-model="v0" label="Visible"></v-checkbox>
      <v-banner v-model="v0" single-line transition="slide-y-transition">
        No Internet connection
        <template v-slot:actions="{ dismiss }">
          <v-btn text color="primary" @click="dismiss"> Dismiss </v-btn>
          <v-btn text color="primary"> Retry </v-btn>
        </template>
      </v-banner>
    </div>

    <br />
    <h3>图标</h3>
    <p>图标插槽允许你明确控制其包含的内容和功能。</p>
    <v-banner two-line>
      <v-avatar slot="icon" color="deep-purple accent-4" size="40">
        <v-icon icon="mdi-lock" color="white"> mdi-lock </v-icon>
      </v-avatar>

      Three line text string example with two actions. One to two lines is
      preferable. Three lines should be considered the maximum string length on
      desktop in order to keep messages short and actionable.

      <template v-slot:actions>
        <v-btn text color="deep-purple accent-4"> Action </v-btn>
        <v-btn text color="deep-purple accent-4"> Action </v-btn>
      </template>
    </v-banner>

    <br />
    <h2>其他</h2>
    <br />
    <h3>两行</h3>
    <p>
      Two-line VBanner 能够存储大量数据，用于大量消息。 这个建议是 移动 实现。
    </p>
    <v-banner>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent cursus
      nec sem id malesuada. Curabitur lacinia sem et turpis euismod, eget
      elementum ex pretium.
      <template v-slot:actions>
        <v-btn text color="primary"> Dismiss </v-btn>
        <v-btn text color="primary"> Retry </v-btn>
      </template>
    </v-banner>
  </div>
</template>

<script>
export default {
  data: () => ({
    sticky: false,
    v0: true,
  }),
  methods: {
    alert() {
      alert("Hello, World!");
    },
  },
};
</script>